<template>
  <div class="attr-item">
    <div class="attr-item-ul">
      <div
        class="attr-item-ul-li"
        v-for="(item, index) in curLinkParams"
        :key="index"
      >
        <a class="li-title" @click="methods.onChangeEditItem(item, index)">
          <template v-if="item.alias">
            {{ item.alias }}
          </template>
          <template v-else>
            {{ item.key }}={{ item.valueLabel ?? item.value }}
          </template>
        </a>
        <div class="li-icon" @click="methods.onChangeEditItem(item, index)">
          <Icon icon="ant-design:form-outlined" />
        </div>
        <div class="li-icon" @click="methods.onDeleteItem(item)">
          <Icon icon="ant-design:delete-outlined" />
        </div>
      </div>
      <Button class="attr-item-add" @click="methods.onAddItem">添加参数</Button>
    </div>
    <Modal v-model:open="isEdit" title="修改标签项" @ok="methods.onConfirm">
      <div class="item-edit">
        <div class="item">
          <div class="label">名称</div>
          <div class="value">
            <a-input v-model:value="curEditItem.alias" />
          </div>
        </div>
        <div class="item">
          <div class="label">参数名</div>
          <div class="value">
            <a-input v-model:value="curEditItem.key" />
          </div>
        </div>
        <div class="item">
          <div class="label">参数值类型</div>
          <div class="value">
            <a-radio-group
              :optionType="'button'"
              v-model:value="curEditItem.valueType"
              :options="valueTypeOptions"
              @change="
                ;(curEditItem.value = undefined),
                  (curEditItem.valueLabel = undefined)
              "
            />
          </div>
        </div>
        <div class="item">
          <div class="label">参数值</div>
          <div class="value">
            <a-input
              v-if="
                curEditItem.valueType ==
                BwFilterTableLinkParamsValueTypeEnum.custom
              "
              v-model:value="curEditItem.value"
            />
            <a-tree-select
              v-else
              v-model:value="curEditItem.value"
              @change-label="methods.onChangeValueLabel"
              :options="options"
            />
          </div>
        </div>
        <div class="item">
          <div class="label">参数类型</div>
          <div class="value">
            <a-radio-group
              :optionType="'button'"
              v-model:value="curEditItem.type"
              :options="typeOptions"
            />
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script lang="ts">
import { PropType, computed, defineComponent, ref } from 'vue'
import { Button, Modal } from 'ant-design-vue'

import { BwFilterTableLinkParamsModel } from './model'
import {
  BwFilterTableLinkParamsTypeEnum,
  BwFilterTableLinkParamsValueTypeEnum,
} from './enum'
import {
  BwFilterTableTreeListFieldsModel,
  TableColumnConfigSelectOptionsModel,
} from '../../model'
import { cloneDeep } from 'lodash-es'

export default defineComponent({
  name: 'BwNodeAttrsConstTableColumnConfigParams',
  components: {
    Button,
    Modal,
  },
  props: {
    options: {
      type: [Array] as PropType<BwFilterTableTreeListFieldsModel[]>,
    },
    value: {
      type: Array as PropType<any[]>,
    },
  },
  emits: ['update:value', 'change'],
  setup(props, { emit }) {
    /** 对象值 */
    const curLinkParams = computed({
      get: (): any[] => {
        return props.value ?? []
      },
      set: (value) => {
        emit('update:value', value)
        emit('change', value)
      },
    })

    const valueTypeOptions: TableColumnConfigSelectOptionsModel[] = [
      {
        label: '字段',
        value: BwFilterTableLinkParamsValueTypeEnum.field,
      },
      {
        label: '自定义',
        value: BwFilterTableLinkParamsValueTypeEnum.custom,
      },
    ]

    const typeOptions: TableColumnConfigSelectOptionsModel[] = [
      {
        label: '查询参数',
        value: BwFilterTableLinkParamsTypeEnum.query,
      },
      {
        label: '路由参数',
        value: BwFilterTableLinkParamsTypeEnum.route,
      },
    ]

    /** 当前编辑项 */
    const curEditItem = ref({} as BwFilterTableLinkParamsModel)
    /** 当前编辑项下标 */
    const curEditIndex = ref(0)

    /** 是否编辑 */
    const isEdit = ref(false)

    const methods = {
      onChangeEditItem(item: BwFilterTableLinkParamsModel, index: number) {
        curEditItem.value = JSON.parse(JSON.stringify(item))
        curEditIndex.value = index
        isEdit.value = true
      },
      onDeleteItem(item: BwFilterTableLinkParamsModel) {
        curLinkParams.value =
          curLinkParams.value?.filter((v) => v.key !== item.key) ?? []
      },
      onAddItem() {
        curEditIndex.value = curLinkParams.value.length
        curEditItem.value = {
          valueType: BwFilterTableLinkParamsValueTypeEnum.field,
          type: 'query',
        }
        isEdit.value = true
      },
      onConfirm() {
        if (!curEditItem.value.key) {
          alert('请输入参数名')
          return
        }
        isEdit.value = false
        let arr = cloneDeep(curLinkParams.value)
        arr[curEditIndex.value] = curEditItem.value
        curLinkParams.value = arr
      },
      onChangeValueLabel(label: string | string[]) {
        if (Array.isArray(label)) {
          curEditItem.value.valueLabel = label.join(',')
        } else {
          curEditItem.value.valueLabel = label
        }
      },
    }

    const curVarRuleVisible = ref<boolean>(false)

    return {
      curLinkParams,
      isEdit,
      curEditItem,
      methods,
      curVarRuleVisible,

      valueTypeOptions,
      typeOptions,
      BwFilterTableLinkParamsValueTypeEnum,
    }
  },
})
</script>

<style lang="less" scoped>
.attr-item {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;

  .attr-item-label {
    width: 100%;
    text-align: left;
    padding: 8px;
    background: rgba(31, 56, 88, 0.06);
    border-top: 1px solid rgba(31, 56, 88, 0.1);
    border-bottom: 1px solid rgba(31, 56, 88, 0.1);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .attr-item-variate {
      margin: 0 8px;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .attr-item-ul {
    flex: 1;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;

    .attr-item-ul-li {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      line-height: 28px;
      height: 28px;
      white-space: nowrap;

      .li-icon-left {
        font-size: 16px;
        margin-right: 8px;
      }

      .li-title {
        flex: 1;
        font-size: 12px;
      }

      .li-icon {
        font-size: 16px;
        cursor: pointer;
        margin-left: 8px;
        opacity: 0.6;

        &:hover {
          opacity: 1;
        }
      }
    }
  }

  .attr-item-add {
    width: 100%;
  }
}

.item-edit {
  padding: 24px;

  .item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #e5e6e8;

    .label {
      width: 90px;
      line-height: 32px;
      text-align: left;
    }

    .value {
      flex: 1;
      .ant-select {
        width: 100%;
      }
    }

    .required:after {
      color: red;
      content: '*';
    }
  }
}
</style>
